@charset "utf-8";

@import "quote/class.less";
@import "quote/color.less";

.container{
  background-color: @cf2;
}
  //视频列表Li
  #movie-item{
    .movie-list{
      position: relative;
      height:18.5rem;
      margin:0 auto;
      margin-bottom:.8rem;
      overflow: hidden;
      .movie-content{
        height:15rem;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
      //透明色遮罩
      .movie-mask{
        position: absolute;
        width:100%;
        height:15rem;
        top:0;
        left:0;
        background: linear-gradient(rgba(204,204,204,0.2),rgba(16,16,16,0.8));
        z-index: 2;

        //描述文字
        .mask-summary{
          position: absolute;
          color:@cf;
          top: 90%;
          transform: translateY(-100%);
          width:100%;
          font-size: 1rem;

          .summary-text{
            float:left;
            width:55%;
            margin-left: 1.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .summary-time{
            float:right;
            margin-right: 1.5rem;
          }
        }

      }
      .movie-box{
        height:3.5rem;
        background-color: @cf;
        line-height: 3.5rem;
        padding-left:1.5rem;
      }
      //movie-list over
    }
  }

  .movie-detail{
    position: fixed;
    height:100%;
    width:100%;
    top:0;
    left:100%;
    background-color: @cf;
    z-index: 12;
    transform: translateX(0%);
    transition:transform 0.4s;
  }

  //固定的视频 detail
  #movie{
    position: relative;
    width:100%;
    video{
      width:100%;
    }
  }


  #movie-main{
    padding:1rem 1.5rem;
    .source-img,.source-span{
      vertical-align:middle;
    }
    .source-span{
      height:1.1rem;
      opacity: 0.5;
    }
  }








